<template>
    <div class="search" v-if="columns">
        <a-form-model :model="form" layout="inline" v-if="form" :labelCol="{ span: 6 }">
            <a-form-model-item :label="items.label" v-for="(items, key, index) in columns" :key="index">
                <a-input v-if="items.type === 'input'" v-model="form[key]" :placeholder="`请输入${items.label}`" />
                <a-select v-if="items.type === 'select'" v-model="form[key]" showSearch>
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option
                        :value="selectOptionsValue(item, items)"
                        v-for="(item, k) in items.options"
                        :key="k"
                    >
                        {{ item.name || item[items.optionsLabel.name] }}
                    </a-select-option>
                </a-select>
                <a-range-picker v-if="items.type === 'range'" valueFormat="YYYY-MM-DD" v-model="form[key]" />
                <a-date-picker v-if="items.type === 'date'" valueFormat="YYYY-MM-DD" v-model="form[key]" />
                <div v-if="items.type === 'number'" id="number">
                    <a-input-number
                        v-model="form[key].min"
                        :min="1"
                        :max="100000000"
                        :placeholder="`请输入${items.label}`"
                    />
                    <span>~</span>
                    <a-input-number
                        v-model="form[key].max"
                        :min="1"
                        :max="100000000"
                        :placeholder="`请输入${items.label}`"
                    />
                </div>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="onClickSearch">
                    搜索
                </a-button>
                <a-button @click="onClickReset">
                    重置
                </a-button>
                <a-button v-if="ex" @click="onClickExport">
                    导出
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
export default {
    name: 'Search',
    props: {
        columns: {
            type: Object,
            default: () => {}
        },
        search: {
            type: Object,
            default: () => {}
        },
        ex: {
            type: Boolean,
            default: false
        },
        filter: {
            type: Function,
            default: params => params
        },
        changeExport: {
            type: Function,
            default: params => params
        },
        change: {
            type: Function,
            default: params => params
        }
    },
    data() {
        return {
            form: this.reset()
        }
    },
    methods: {
        selectOptionsValue(item, items) {
            if (item.value === 0 || item.value === '' || item.value) {
                return item.value
            }
            return item[items.optionsLabel.value]
        },
        reset() {
            const from = {}
            Object.keys(this.columns).forEach(key => {
                if (this.columns[key].type === 'range') {
                    from[key] = []
                } else if (this.columns[key].type === 'number') {
                    from[key] = {
                        min: '',
                        max: ''
                    }
                } else {
                    from[key] = ''
                }
            })
            return from
        },
        async onClickReset() {
            this.form = this.reset()
            this.emit()
        },
        onClickSearch() {
            this.emit()
        },
        changeReset() {
            this.form = this.reset()
        },
        onClickExport() {
            let form = {}
            Object.keys(this.form)
                .filter(key => this.form[key] !== '' && this.form[key] !== null && this.form[key] !== undefined)
                .forEach(key => {
                    if (this.columns[key].type === 'number') {
                        if (this.form[key].min && this.form[key].max) {
                            form[key] = [this.form[key].min, this.form[key].max]
                        }
                    } else {
                        form[key] = this.form[key]
                    }
                })
            form = this.filter(form)
            this.changeExport(form)
        },
        emit() {
            let form = {}
            Object.keys(this.form)
                .filter(key => this.form[key] !== '' && this.form[key] !== null && this.form[key] !== undefined)
                .forEach(key => {
                    if (this.columns[key].type === 'number') {
                        if (this.form[key].min && this.form[key].max) {
                            form[key] = [this.form[key].min, this.form[key].max]
                        }
                    } else {
                        form[key] = this.form[key]
                    }
                })
            form = this.filter(form)
            this.$emit('update:search', { ...form })
        },
        getSearchData() {
            const form = {}
            Object.keys(this.form)
                .filter(key => this.form[key] !== '' && this.form[key] !== null && this.form[key] !== undefined)
                .forEach(key => {
                    if (this.columns[key].type === 'number') {
                        if (this.form[key].min && this.form[key].max) {
                            form[key] = [this.form[key].min, this.form[key].max]
                        }
                    } else {
                        form[key] = this.form[key]
                    }
                })
            return form
        }
    }
}
</script>

<style lang="less" scoped>
.search {
    // margin-bottom: 20px;
    ::v-deep {
        .ant-btn + .ant-btn {
            margin-left: 10px;
        }
        .ant-form-item-label {
            width: 70px;
            text-align: right;
        }
        .ant-input {
            width: 200px;
        }
        .ant-select {
            width: 200px !important;
        }
        .ant-calendar-picker-input {
            width: 200px;
        }
        #number {
            display: inline-block;
            .ant-input-number {
                width: 100px;
            }
            span {
                padding: 0 5px;
            }
        }
    }
}
</style>
